<template>
  <div>
    <h1>App</h1>
    <h2>one组件的数据:{{ data }}</h2>
    <button @click="getOneData">获取One组件的数据</button>
    <button @click="addOneData">添加One组件的数据</button>
    <hr />
    <One ref="one" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import One from "./One.vue";
import { ref } from "vue";

const one = ref();
const data = ref();
const getOneData = () => {
  data.value = one.value.oneData;
};
const addOneData = () => {
  one.value.oneData++;
};

</script>

<style  scoped >
</style>